<template>
  <div style="width: 50%">
    <el-select
      v-model="iconName"
      @change="change"
      filterable
      clearable
      placeholder="请选择图标"
    >
      <template #label="{ label, value }">
        <div class="display-common-horizontal-left">
          <el-icon size="22px">
            <component :is="iconName" />
          </el-icon>
          <span style="padding-left: 10px">{{ value }}</span>
        </div>
      </template>
      <el-option
        v-for="iconKey in iconList"
        :key="iconKey"
        :label="iconKey"
        :value="iconKey"
      >
        <el-icon>
          <component :is="iconKey" />
        </el-icon>
        <span style="margin-left: 20px">
          {{ iconKey }}
        </span>
      </el-option>
    </el-select>
  </div>
</template>

<script setup name="">
import { toRefs } from "vue";
import { iconList } from "@/utils/iconList";
const props = defineProps({
  iconName: {
    type: String,
    default: "",
  },
});
const { iconName } = toRefs(props);
const emit = defineEmits(["selectIcon"]);
const change = (val) => {
  console.log(val);

  emit("selectIcon", val);
};
</script>

<style lang="scss" scoped></style>
